<template>
    <div id="warehouse_tpl">
        <el-dialog
        :title="type == 'add' ? '新建仓库' : '编辑仓库'"
        :visible.sync="dialogVisible"
        class=''
        top="10vh"
        :close-on-click-modal="false"
        :before-close="handleClose"
        >
            <el-form v-model="formData" label-position="right" label-width="100px">
                <el-form-item label="仓库名称:" required>
                    <el-input size="small" :maxlength="5" v-model="formData.warehouseName" placeholder="请填写仓库名称"></el-input>
                </el-form-item>
                <el-form-item label="仓库类型:" >
                    <el-select disabled size="small" v-model="formData.warehouseType">
                        <el-option
                            v-for="item in typeOpions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option> 
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="关联门店:" v-if="type== 'edit' && formData.warehouseType == 0">
                    <el-select size="small" v-model="formData.storeNo" placeholder="请选择关联门店">
                        <el-option-group
                        v-for="group in storeList"
                        :key="group.cityId"
                        :label="group.city">
                            <el-option
                                v-for="item in group.list"
                                :key="item.storeNo"
                                :label="item.storeName"
                                :value="item.storeNo">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="外部仓库:">
                    <el-select size="small" v-model="warehouseObj" :disabled="type == 'edit' ? true : false" clearable filterable>
                        <el-option v-for="(item) in jwarehouseList" :label="item.outerWarehouseName" :value="item.outerWarehouseId + ',' + item.outerWarehouseName" :key="item.outerWarehouseId"></el-option>
                    </el-select>
                </el-form-item>
                 <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="虚拟仓:">
                                <el-switch
                                class="warehouse"
                                style="display: block"
                                v-model="formData.isVirtual"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="是"
                                inactive-text="否"
                                @change="handleSwitchChange">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="启用禁用:">
                                <el-switch
                                class="warehouse"
                                style="display: block"
                                v-model="formData.isLocked"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="禁用"
                                size="small"
                                inactive-text="启用">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="联系人:">
                                <el-input size="small" :maxlength="5" v-model="formData.personName" placeholder="请填写联系人姓名" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="联系电话:">
                                <el-input size="small" v-model="formData.mobileNumber" placeholder="请填写联系人电话" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <provinceAndcity  v-if="!formData.isVirtual" :type="type" :isVirtual="formData.isVirtual" :provinceData="provinceData"></provinceAndcity>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleClose">取 消</el-button>
                <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import provinceAndcity from '../../commonComponents/provinceAndcity'
export default {
    components: {provinceAndcity},
    props: ['type', 'id', 'isShow'],
    computed: {
        dialogVisible: {
            get() {
                return this.isShow
            },
            set() {}
        },
       
        provinceData() {
            this.isShowP= true
             return this.$store.state.provinceAndCity;
        },

    },
    data() {
        return {
            formData: {
                warehouseName: '',
                warehouseType: '1',
                warehouseLevel: '1',
                storeNo: '',
                isLocked: 0,
                isVirtual: 0,
                personName: '',
                mobileNumber: '',
                outerWhId: ''
            },
            isShowP: false,
            warehouseObj: null,
            storeList: [],
            typeOpions: [
                {
                    value: '0',
                    label: '门店仓'
                },
                {
                    value: '1',
                    label: '存储仓'
                }
            ],
            jwarehouseList: [],
        }
    },
    created() {
        if(this.type == 'edit') {
            this.getWarehouseDetail()
        }
    },
    mounted() {
        this.getStoreListByGroup() 
        this.getJwarehouseList()
    },
    methods: {
        getJwarehouseList() {
            this.$server.storeWarehouseController.getJsterpWarehousesList().then(res => {
                this.jwarehouseList= res.data
            })
        },
        /**获取门店 */
        getStoreListByGroup() {
            this.$server.systemControlApi.getStoreListByGroup().then(res => {
                this.storeList= res.data
            })
        },
        handleClose() {
            this.$confirm('确认关闭？').then(_ => {
                this.$emit('cancelShow', false)
                this.$emit('getWarehouseList')
            }).catch(_ => {});
        },
        getWarehouseDetail() {
            this.$server.storeWarehouseController.checkWarehouseDetail(this.id).then(res => {
                this.formData.warehouseName= res.data.warehouseName
                this.formData.warehouseType= res.data.warehouseType
                this.formData.isLocked= res.data.isLocked == 1 ? true : false
                this.formData.isVirtual= res.data.isVirtual == 1? true : false
                this.$store.dispatch('changeProvince', res.data.isVirtual == 0 ? res.data.provinceCode +',' +res.data.province : '')
                this.$store.dispatch('changeCity', res.data.isVirtual == 0 ? res.data.cityCode +',' +res.data.city : '')
                this.$store.dispatch('changeArea', res.data.isVirtual == 0 ? res.data.districtCode +',' +res.data.district: '')
                this.$store.dispatch('changeLocalDetails', res.data.isVirtual == 0 ? res.data.addressName : '')
                this.formData.personName= res.data.personName
                this.formData.mobileNumber= res.data.mobileNumber
                if(res.data.outerWhId && res.data.outerWhName) {
                    this.warehouseObj= res.data.outerWhId +',' + res.data.outerWhName
                }
            })
        },
        handleSwitchChange(val) {

        },
        handleSubmit() {
            let {warehouseName, warehouseType, warehouseLevel,  storeNo, isLocked, isVirtual, personName, mobileNumber}= this.formData
            if(!/^[0-9]{11}$/.test(mobileNumber)) {
                this.$message({
                    message: '联系电话为11位数字',
                    type: 'error',
                    duration: 1500
                })
            }else if(warehouseName == ''){
                this.$message({
                    message: '请填写仓库名称',
                    type: 'error',
                    duration: 1500
                })
            }else if(isVirtual == false && this.provinceData.province == '') {
                this.$message({
                    message: '请选择省份',
                    type: 'error',
                    duration: 1500
                })
            }else if(isVirtual == false && this.provinceData.city == '') {
                this.$message({
                    message: '请选择市',
                    type: 'error',
                    duration: 1500
                })
            }else if(isVirtual == false && this.provinceData.area == '') {
                this.$message({
                    message: '请选择区、县',
                    type: 'error',
                    duration: 1500
                })
            }else if(isVirtual == false && this.provinceData.localDetails == '') {
                this.$message({
                    message: '请填写详细地址',
                    type: 'error',
                    duration: 1500
                })
            }
            else {
                let params= {
                    outerWhName: this.warehouseObj ? this.warehouseObj.split(',')[1] : '',
                    outerWhId: this.warehouseObj ? this.warehouseObj.split(',')[0]  : '',
                    warehouseLevel: warehouseLevel,
                    // storeNo: storeNo,
                    warehouseName: warehouseName,
                    warehouseType: warehouseType,
                    isLocked: isLocked ? 1 : 0,
                    isVirtual: isVirtual ? 1 : 0,   
                    mobileNumber: mobileNumber,
                    personName: personName
                }
                if(!isVirtual) {
                    params.provinceCode=  this.provinceData.province.split(',')[0]
                    params.province= this.provinceData.province.split(',')[1]
                    params.cityCode= this.provinceData.city.split(',')[0]
                    params.city= this.provinceData.city.split(',')[1]
                    params.districtCode= this.provinceData.area.split(',')[0]
                    params.district= this.provinceData.area.split(',')[1] 
                    params.addressName= this.provinceData.localDetails
                }

    
                if(this.type == 'add') {
                    this.$server.storeWarehouseController.createWarehouse(params).then(res => {
                        this.$emit('cancelShow', false)
                        this.$emit('getWarehouseList')
                    })
                }else{
                    this.$confirm('确定修改?').then(_ => {
                        this.$server.storeWarehouseController.editWarehouse(this.id, params).then(res => {
                            this.$emit('cancelShow', false)
                            this.$emit('getWarehouseList')
                        })
                    }).catch()
                }
            }  
        }
    }
}
</script>
<style lang="less" scoped>
    .warehouse {
        height: 40px;
        display: flex;
        align-items: center;
    }
</style>